<template>
  <HomePanel title="热门推荐" desc="人气热门 品质靠谱">
    <div class="container">
      <div class="homePanelItem" v-for="item in hotList" :key="item.id">
        <RouterLink :to="`/detail/${item.id}`">
          <div class="img">
            <img  alt="" v-img-lazy="item.picture"/>
          </div>
          <div class="title">
            <p class="name">{{ item.title }}</p>
            <p class="price">{{ item.alt }}</p>
          </div>
        </RouterLink>
      </div>
    </div>
  </HomePanel>
</template>

<script setup name="ComponentName">
import { onMounted, ref } from 'vue'
import HomePanel from './HomePanel.vue'
import { getHotAPI } from '@/api/home'

const hotList = ref([])

const getHotList = async () => {
  const res = await getHotAPI()
  hotList.value = res.result
}
onMounted(() => {
  getHotList()
})
</script>

<style scoped lang="scss">
.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 20px;
}
.homePanelItem {
  display: flex;
  flex-flow: row wrap;
  width: calc(25% - 20px);
  height: 400px;
  background: #e4e1e1;

  a {
    width: 100%;
    height: 100%;
    .img {
      width: 100%;
      height: 300px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      width: 100%;
      height: 100px;
      display: flex;
      flex-flow: column;
      gap: 10px;
      padding: 10px;
      p {
        width: 100%;
        color: #333;
        &.name {
          font-size: 20px;
          font-weight: bold;
          /* 超出部分省略号 2行 */
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
                    text-align: center;
        }

        &.price {
          font-size: 14px;
          font-weight: bold;
          color: rgb(119, 118, 118);
          text-align: center;
        }
      }
    }
  }

  &:hover{
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;
  }
}
</style>
